<!--
 * Description: CBOM Group
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/10/22 19:36
-->

<template>
  <BaseWrap>
    <BaseFunc
      drawer-size="600"
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <!-- 按钮 -->
      <template slot="btn">
        <el-button
          v-if="$hasPer('add')"
          class="btn-custom"
          icon="el-icon-circle-plus-outline"
          plain
          size="mini"
          type="primary"
          @click="addDialogVisible = true"
        >
          {{ $t('button.add') }}
        </el-button>
      </template>

      <!--抽屉内部查询表单-->
      <template>
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="medium">
          <el-row>
            <!--Category-->
            <el-col :span="6">
              <el-form-item label="Category">
                <el-input v-model="queryForm.category" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <div class="bottom-table">
      <el-table
        :cell-class-name="cellClass"
        :data="treeData"
        default-expand-all
        :header-cell-style="headerClass"
        height="100%"
        row-key="id"
        style="width: 100%;"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- Category -->
        <el-table-column
          align="left"
          header-align="center"
          label="Category"
          min-width="400px"
          prop="category"
        />
        <!-- Order -->
        <el-table-column align="center" label="Order" min-width="200px" prop="order" />

        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="250px"
        >
          <template slot-scope="scope">
            <el-link
              v-if="$hasPer('edit')"
              icon="el-icon-edit"
              style="margin-right:10px"
              @click="rowEdit(scope.$index, scope.row)"
            >
              {{ $t('button.edit') }}
            </el-link>
            <el-link
              v-if="$hasPer('delete')"
              icon="el-icon-delete"
              @click="rowDelete(scope.$index, scope.row)"
            >
              {{ $t('button.delete') }}
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增 -->
    <BaseDialog
      v-if="addDialogVisible"
      :title="$t('dialog.add')"
      :visible.sync="addDialogVisible"
      width="800px"
    >
      <CbomGroupAdd :treeData="treeData" @cancel="addDialogVisible = false" @save="afterSave" />
    </BaseDialog>

    <!--编辑-->
    <BaseDialog
      v-if="editDialogVisible"
      :title="$t('dialog.edit')"
      :visible.sync="editDialogVisible"
      width="800px"
    >
      <CbomGroupEdit
        :rowData="currentRowData"
        :treeData="treeData"
        @cancel="editDialogVisible = false"
        @save="afterSave"
      />
    </BaseDialog>
  </BaseWrap>
</template>
<script>
import CbomGroupAdd from './components/CbomGroupAdd'
import CbomGroupEdit from './components/CbomGroupEdit'
import { cbomGroupListAll, cbomGroupDelete } from '@/api/cbom/group'
export default {
  name: 'CbomGroup',
  components: { CbomGroupAdd, CbomGroupEdit },
  data() {
    return {
      queryForm: {},

      addDialogVisible: false,

      editDialogVisible: false,

      isRequesting: false,

      advanceOptionDrawer: false,

      treeData: [],

      rawList: [],

      currentRowData: {}
    }
  },

  created() {
    this.pageDataInit()
  },

  methods: {
    // 单元格样式
    cellClass() {
      return 'no-border'
    },
    // table 头部样式
    headerClass() {
      return 'background: #e4e4e4 !important;padding:5px 0px;'
    },

    /* 页面数据初始化*/
    pageDataInit() {
      this.query()
    },

    /* 查询表格数据*/
    async query() {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const res = await cbomGroupListAll(this.queryForm)
        this.treeData = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },

    /** 行编辑 */
    rowEdit(index, rowData) {
      this.currentRowData = rowData
      this.editDialogVisible = true
    },

    async rowDelete(index, rowData) {
      try {
        await this.$confirmBox(this.$t('button.delete'), 'error')
        this.isRequesting = true
        await cbomGroupDelete(
          {
            id: rowData.id,
            category: rowData.category
          },
          { msgSuccess: true, msgError: true }
        )
        this.pageDataInit()
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },

    afterSave() {
      this.pageDataInit()
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom-table {
  height: calc(100% - 50px);
}

/deep/ .no-border {
  border-right: 1px solid transparent !important;
}
</style>
